<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue'
import { reactive, ref } from 'vue'
import Api from '@/api'
import { message } from 'ant-design-vue'
import { useI18n } from '@/hooks/useI18n'

// 结构Hooks
const { t } = useI18n();

// 配置项目
const fieldNames = {
  label: 'classificationName',
  value: 'classificationId',
  children: 'lowerLevelClassifications'
}

// 引用声明
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '????'
  },
  options: {
    type: Array,
    default: () => []
  }
})

// 引用事件
const emit = defineEmits(['update:open', 'callback'])

// 引用数据
const open = useVModel(props, 'open', emit)

// 响应式数据
const formRef = ref()
const form = reactive<API.AddClassTopicParams>({
  parentId: [0],
  classificationNames: [{
    name: '',
    key: Date.now()
  }]
})


// 确定事件
const handleOk = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = {
        parentId: form.parentId?.at(-1),
        classificationNames: Array.from(new Set(form.classificationNames.map(item => item.name)))
      }
      const response = await Api.topic.classTopicAdd(params)
      if (response) {
        SuccessCallBack()
      }
    })
    .catch((error: Error) => {
      console.log('error', error)
    })
}

// 增加事件
const addDomain = () => {
  form.classificationNames.push({
    name: '',
    key: Date.now()
  })
}

// 减少事件
const removeDomain = (item: API.Domain) => {
  if (form.classificationNames.length <= 1) {
    message.warning(t('routes.topic.form.lastTip'))
    return
  }
  const index = form.classificationNames.indexOf(item)
  if (index !== -1) {
    form.classificationNames.splice(index, 1)
  }
}

// 成功回调
const SuccessCallBack = () => {
  message.success(t('common.addSuccess'))
  open.value = false
  formRef.value.resetFields()
  form.classificationNames = [{
    name: '',
    key: Date.now()
  }]
  form.parentId = [0]
  emit('callback')
}

</script>

<template>
  <a-modal v-model:open="open" :title="title" @ok="handleOk"
           :cancel-text="$t('common.cancelText')" :ok-text="$t('common.okText')"
  >
    <a-form
      :model="form" ref="formRef"
      name="dynamic_form_item"
      class="mt-5"
      layout="horizontal"
    >
      <a-form-item
        name="parentId"
      >
        <a-cascader v-model:value="form.parentId" :options="options" :fieldNames="fieldNames" change-on-select />
      </a-form-item>


      <a-form-item
        v-for="(domain, index) in form.classificationNames"
        :key="domain.key"
        :name="['classificationNames', index, 'name']"
        :rules="{
        required: true,
        message:$t('routes.topic.form.addContent'),
        trigger: 'change',
      }"
      >
        <div class="flex items-center">
          <a-input
            v-model:value="domain.name"
            :placeholder="$t('routes.topic.form.addContent')"
            class="flex-1 mr-3"
          />

          <MinusCircleOutlined @click="removeDomain(domain)" class="cursor-pointer" />
        </div>
      </a-form-item>

      <a-button @click="addDomain" type="primary" :block="true">
        <template #icon>
          <PlusOutlined />
        </template>
        {{ $t('routes.topic.form.addTopic') }}
      </a-button>

    </a-form>
  </a-modal>
</template>

<style scoped lang="less">

</style>
